@ctrl-ui/react 0.8.17 → 0.8.19

package/dist/blocks/coding-agent.js

@@ -215,7 +215,7 @@ function CodingAgentEmptyState({ title = "What should we build?", description, i
 				})
 			}),
 			/* @__PURE__ */ jsx("h2", {
-				className: "text-balance text-heading-3 sm:text-heading-2",
+				className: "text-heading-3 sm:text-heading-2",
 				children: title
 			}),
 			description ? /* @__PURE__ */ jsx("p", {

package/dist/blocks/design-canvas-inspector.js

@@ -1,12 +1,12 @@
 "use client";
 import { Button } from "../ui/button.js";
 import { InputGroup, InputGroupAddon } from "../ui/input-group.js";
-import { resizeDesignCanvasLayer } from "./design-canvas-data.js";
 import { NumberField, NumberFieldGroup, NumberFieldInput, NumberFieldScrubArea } from "../ui/number-field.js";
 import { ColorPicker, ColorPickerArea, ColorPickerContent, ColorPickerEyeDropper, ColorPickerHue, ColorPickerInput, ColorPickerTrigger } from "../ui/color-picker.js";
 import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "../ui/empty.js";
 import { Separator } from "../ui/separator.js";
 import { Toggle } from "../ui/toggle.js";
+import { resizeDesignCanvasLayer } from "./design-canvas-data.js";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { BlendIcon, EyeIcon, EyeOffIcon, Link2Icon, MinusIcon, PlusIcon, RotateCwIcon, SquareRoundCornerIcon, Unlink2Icon } from "lucide-react";

package/dist/blocks/design-canvas.js

@@ -3,12 +3,13 @@ import { cn } from "../lib/cn.js";
 import { Button } from "../ui/button.js";
 import { ScrollArea } from "../ui/scroll-area.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip.js";
-import { createDesignCanvasLayer, designCanvasFillColor, drawnDesignCanvasBounds } from "./design-canvas-data.js";
-import { DesignCanvasInspector } from "./design-canvas-inspector.js";
+import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarSeparator } from "../ui/toolbar.js";
 import { Drawer, DrawerContent, DrawerTitle } from "../ui/drawer.js";
 import { InfiniteCanvas, InfiniteCanvasContent, InfiniteCanvasControls, InfiniteCanvasItem } from "../ui/infinite-canvas.js";
 import { ResizableFloatingPanel } from "../ui/resizable.js";
-import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarSeparator } from "../ui/toolbar.js";
+import { Text } from "../ui/typography.js";
+import { createDesignCanvasLayer, designCanvasFillColor, drawnDesignCanvasBounds } from "./design-canvas-data.js";
+import { DesignCanvasInspector } from "./design-canvas-inspector.js";
 import { useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CircleIcon, FrameIcon, LayersIcon, MousePointer2Icon, SlidersHorizontalIcon, SquareIcon, TypeIcon } from "lucide-react";
@@ -414,8 +415,11 @@ function DesignCanvasLayerNode({ layer, selected, onSelect, onKeyDown, onLayerCh
 				className: "absolute start-0 bottom-full mb-1 whitespace-nowrap text-caption text-muted-foreground",
 				children: layer.name
 			}) : null,
-			layer.kind === "text" ? /* @__PURE__ */ jsx("p", {
-				className: "size-full overflow-hidden text-2xl leading-8 whitespace-nowrap",
+			layer.kind === "text" ? /* @__PURE__ */ jsx(Text, {
+				as: "p",
+				size: "heading-2",
+				weight: "normal",
+				className: "size-full overflow-hidden whitespace-nowrap",
 				style: { color: fillColor },
 				children: layer.text
 			}) : /* @__PURE__ */ jsx("div", {

package/dist/blocks/discussion-markdown-input.d.ts

@@ -0,0 +1,12 @@
+import { MarkdownImageUploader } from "../markdown-editor/uploads.js";
+import { MarkdownEditorStatus } from "../markdown-editor.js";
+//#region src/blocks/discussion-markdown-input.d.ts
+export default function DiscussionMarkdownInput({ label, placeholder, autoFocus, onUploadImage, onStatusChange, blocked }: {
+  label: string;
+  placeholder?: string;
+  autoFocus?: boolean;
+  onUploadImage?: MarkdownImageUploader;
+  onStatusChange: (status: MarkdownEditorStatus) => void;
+  blocked: boolean;
+}): import("react").JSX.Element;
+//#endregion

package/dist/blocks/discussion-markdown-input.js

@@ -0,0 +1,34 @@
+"use client";
+import { useChatComposerContext } from "../chat-composer.js";
+import { MarkdownEditor, MarkdownEditorContent } from "../markdown-editor.js";
+import { MarkdownEditorToolbar, MarkdownEditorUploads } from "../markdown-editor/toolbar.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/blocks/discussion-markdown-input.tsx
+function DiscussionMarkdownInput({ label, placeholder, autoFocus, onUploadImage, onStatusChange, blocked }) {
+	const composer = useChatComposerContext();
+	return /* @__PURE__ */ jsxs(MarkdownEditor, {
+		value: composer.value,
+		onValueChange: composer.setValue,
+		disabled: composer.isDisabled || composer.isLocked,
+		onUploadImage,
+		onStatusChange,
+		onKeyDownCapture: (event) => {
+			if (!(event.target instanceof HTMLElement) || !event.target.isContentEditable && event.target.tagName !== "TEXTAREA") return;
+			if (event.key !== "Enter" || !(event.metaKey || event.ctrlKey) || event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229) return;
+			event.preventDefault();
+			event.stopPropagation();
+			if (!blocked) composer.submit();
+		},
+		children: [
+			/* @__PURE__ */ jsx(MarkdownEditorToolbar, {}),
+			/* @__PURE__ */ jsx(MarkdownEditorContent, {
+				label,
+				placeholder,
+				autoFocus
+			}),
+			/* @__PURE__ */ jsx(MarkdownEditorUploads, {})
+		]
+	});
+}
+//#endregion
+export { DiscussionMarkdownInput as default };

package/dist/blocks/discussion.d.ts

@@ -1,3 +1,4 @@
+import { MarkdownImageUploader } from "../markdown-editor/uploads.js";
 import { ChatComposer } from "../chat-composer.js";
 import { ChatMessage } from "../chat-message.js";
 import { ComponentProps, ReactNode } from "react";
@@ -9,20 +10,23 @@ export type DiscussionComposerProps = Omit<ComponentProps<typeof ChatComposer>,
   secondaryAction?: ReactNode;
   hint?: ReactNode;
   autoFocus?: boolean;
+  format?: "plain" | "markdown";
+  onUploadImage?: MarkdownImageUploader;
 };
-export declare function DiscussionComposer({ label, placeholder, submitLabel, secondaryAction, hint, autoFocus, ...props }: DiscussionComposerProps): import("react").JSX.Element;
+export declare function DiscussionComposer({ label, placeholder, submitLabel, secondaryAction, hint, autoFocus, format, onUploadImage, onSubmit, ...props }: DiscussionComposerProps): import("react").JSX.Element;
 export type DiscussionCommentProps = Omit<ComponentProps<typeof ChatMessage>, "from" | "layout" | "authorLabel" | "children"> & {
   author: string;
   avatar?: ReactNode;
   sentAt: string;
   timeLabel: ReactNode;
   edited?: boolean;
-  children: ReactNode;
+  children?: ReactNode;
+  markdown?: string;
   actions?: ReactNode;
   onReply?: () => void;
   replyLabel?: ReactNode;
   replies?: ReactNode;
   replyComposer?: ReactNode;
 };
-export declare function DiscussionComment({ author, avatar, sentAt, timeLabel, edited, children, actions, onReply, replyLabel, replies, replyComposer, ...props }: DiscussionCommentProps): import("react").JSX.Element;
+export declare function DiscussionComment({ author, avatar, sentAt, timeLabel, edited, children, markdown, actions, onReply, replyLabel, replies, replyComposer, ...props }: DiscussionCommentProps): import("react").JSX.Element;
 //#endregion

package/dist/blocks/discussion.js

@@ -3,32 +3,90 @@ import { Button } from "../ui/button.js";
 import { ChatComposer, ChatComposerShell, ChatComposerSubmit, ChatComposerTextarea, ChatComposerToolbar } from "../chat-composer.js";
 import { ChatMessageReplies } from "../chat-message/social.js";
 import { ChatMessage, ChatMessageActions, ChatMessageAuthor, ChatMessageAvatar, ChatMessageBody, ChatMessageContent, ChatMessageFooter, ChatMessageHeader, ChatMessageRow, ChatMessageTime } from "../chat-message.js";
+import { Markdown } from "../ui/markdown.js";
 import { Kbd, KbdGroup } from "../ui/kbd.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Suspense, lazy, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { CornerDownRightIcon } from "lucide-react";
 //#region src/blocks/discussion.tsx
-function DiscussionComposer({ label, placeholder, submitLabel = "Post", secondaryAction, hint = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(KbdGroup, { children: [/* @__PURE__ */ jsx(Kbd, { children: "⌘" }), /* @__PURE__ */ jsx(Kbd, { children: "Enter" })] }), /* @__PURE__ */ jsx("span", { children: "to post" })] }), autoFocus, ...props }) {
+const DiscussionMarkdownInput = lazy(() => import("./discussion-markdown-input.js"));
+function DiscussionComposer({ label, placeholder, submitLabel = "Post", secondaryAction, hint = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(KbdGroup, { children: [/* @__PURE__ */ jsx(Kbd, { children: "⌘" }), /* @__PURE__ */ jsx(Kbd, { children: "Enter" })] }), /* @__PURE__ */ jsx("span", { children: "to post" })] }), autoFocus, format = "plain", onUploadImage, onSubmit, ...props }) {
+	const [draft, setDraft] = useState(props.defaultValue ?? "");
+	const value = props.value ?? draft;
+	const [status, setStatus] = useState({
+		isEmpty: false,
+		hasPendingUploads: false
+	});
+	const [submitting, setSubmitting] = useState(false);
+	const [error, setError] = useState(null);
+	const blocked = format === "markdown" && (status.isEmpty || status.hasPendingUploads);
 	return /* @__PURE__ */ jsx(ChatComposer, {
 		submitKey: "mod-enter",
 		...props,
-		children: /* @__PURE__ */ jsxs(ChatComposerShell, { children: [/* @__PURE__ */ jsx(ChatComposerTextarea, {
-			"aria-label": label,
-			placeholder,
-			autoFocus,
-			"aria-keyshortcuts": "Meta+Enter Control+Enter"
-		}), /* @__PURE__ */ jsxs(ChatComposerToolbar, { children: [/* @__PURE__ */ jsx("span", {
-			className: "flex min-w-0 items-center gap-1.5 text-caption text-muted-foreground",
-			children: hint
-		}), /* @__PURE__ */ jsxs("span", {
-			className: "flex items-center gap-2",
-			children: [secondaryAction, /* @__PURE__ */ jsx(ChatComposerSubmit, { children: submitLabel })]
-		})] })] })
+		value,
+		onValueChange: (next) => {
+			setDraft(next);
+			props.onValueChange?.(next);
+		},
+		state: submitting ? "submitting" : props.state,
+		onSubmit: async (payload) => {
+			if (blocked || submitting) return;
+			setSubmitting(true);
+			setError(null);
+			try {
+				await onSubmit?.({
+					...payload,
+					value: format === "markdown" ? value : payload.value
+				});
+			} catch (cause) {
+				setError(cause instanceof Error ? cause.message : "Couldn't post your comment. Please try again.");
+			} finally {
+				setSubmitting(false);
+			}
+		},
+		children: /* @__PURE__ */ jsxs(ChatComposerShell, { children: [
+			format === "markdown" ? /* @__PURE__ */ jsx(Suspense, {
+				fallback: /* @__PURE__ */ jsx(ChatComposerTextarea, {
+					"aria-label": label,
+					placeholder,
+					disabled: true
+				}),
+				children: /* @__PURE__ */ jsx(DiscussionMarkdownInput, {
+					label,
+					placeholder,
+					autoFocus,
+					onUploadImage,
+					onStatusChange: setStatus,
+					blocked
+				})
+			}) : /* @__PURE__ */ jsx(ChatComposerTextarea, {
+				"aria-label": label,
+				placeholder,
+				autoFocus,
+				"aria-keyshortcuts": "Meta+Enter Control+Enter"
+			}),
+			error ? /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "px-3",
+				children: error
+			}) : null,
+			/* @__PURE__ */ jsxs(ChatComposerToolbar, { children: [/* @__PURE__ */ jsx("span", {
+				className: "flex min-w-0 items-center gap-1.5 text-caption text-muted-foreground",
+				children: hint
+			}), /* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-2",
+				children: [secondaryAction, /* @__PURE__ */ jsx(ChatComposerSubmit, {
+					disabled: blocked || submitting,
+					children: submitLabel
+				})]
+			})] })
+		] })
 	});
 }
 function initials(name) {
 	return name.split(/\s+/).slice(0, 2).map((word) => word.charAt(0).toUpperCase()).join("");
 }
-function DiscussionComment({ author, avatar, sentAt, timeLabel, edited = false, children, actions, onReply, replyLabel = "Reply", replies, replyComposer, ...props }) {
+function DiscussionComment({ author, avatar, sentAt, timeLabel, edited = false, children, markdown, actions, onReply, replyLabel = "Reply", replies, replyComposer, ...props }) {
 	const hasReplies = Boolean(replies) || Boolean(replyComposer);
 	return /* @__PURE__ */ jsx(ChatMessage, {
 		from: "participant",
@@ -49,7 +107,10 @@ function DiscussionComment({ author, avatar, sentAt, timeLabel, edited = false,
 					}),
 					edited ? /* @__PURE__ */ jsx("span", { children: "(edited)" }) : null
 				] }),
-				/* @__PURE__ */ jsx(ChatMessageContent, { children }),
+				/* @__PURE__ */ jsx(ChatMessageContent, { children: markdown !== void 0 ? /* @__PURE__ */ jsx(Markdown, {
+					content: markdown,
+					mode: "static"
+				}) : children }),
 				onReply ? /* @__PURE__ */ jsx(ChatMessageFooter, { children: /* @__PURE__ */ jsxs(Button, {
 					variant: "ghost",
 					size: "xs",

package/dist/blocks/file-explorer.js

@@ -8,12 +8,12 @@ import { Input } from "../ui/input.js";
 import { SidebarProvider, useSidebar } from "../ui/sidebar-provider.js";
 import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar-menu.js";
 import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarInset, SidebarRail, SidebarTrigger } from "../ui/sidebar.js";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "../ui/breadcrumb.js";
 import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty.js";
 import { Drawer, DrawerBody, DrawerContent, DrawerTitle, DrawerTrigger } from "../ui/drawer.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "../ui/resizable.js";
 import { groupFileExplorerItems, orderFileExplorerEntries, resolveFileExplorer, searchFileExplorer } from "./file-explorer-data.js";
-import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "../ui/breadcrumb.js";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
 import { Fragment, useEffect, useId, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronLeftIcon, ChevronRightIcon, FileIcon, FolderIcon, MoreHorizontalIcon, SearchIcon, XIcon } from "lucide-react";
@@ -395,7 +395,7 @@ function FileExplorerColumns({ columns, selectedEntry, selectedPath, headingAs,
 				}), /* @__PURE__ */ jsx(DrawerContent, { children: selectedEntry ? /* @__PURE__ */ jsx(DrawerBody, { children: /* @__PURE__ */ jsx(FileExplorerPreviewContent, {
 					entry: selectedEntry,
 					title: /* @__PURE__ */ jsx(DrawerTitle, {
-						className: "mt-4 max-w-full truncate text-heading-4 font-semibold",
+						className: "mt-4 max-w-full truncate text-heading-4",
 						children: selectedEntry.name
 					})
 				}) }) : null })] })]
@@ -533,7 +533,7 @@ function FileExplorerPreview({ entry, headingAs: Heading }) {
 			entry,
 			className: "px-6 py-10",
 			title: /* @__PURE__ */ jsx(Heading, {
-				className: "mt-4 max-w-full truncate text-heading-4 font-semibold",
+				className: "mt-4 max-w-full truncate text-heading-4",
 				title: entry.name,
 				children: entry.name
 			})

package/dist/blocks/settings.js

@@ -10,8 +10,9 @@ import { SidebarProvider, useSidebar } from "../ui/sidebar-provider.js";
 import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar-menu.js";
 import { Sidebar, SidebarContent, SidebarHeader, SidebarInset, SidebarTrigger } from "../ui/sidebar.js";
 import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "../ui/empty.js";
-import { searchSettings } from "./settings-data.js";
 import { Field, FieldContent, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet } from "../ui/field.js";
+import { Heading } from "../ui/typography.js";
+import { searchSettings } from "./settings-data.js";
 import { useEffect, useId, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ArrowLeftIcon, SearchIcon, XIcon } from "lucide-react";
@@ -212,8 +213,9 @@ function SettingsPage({ page, instanceId }) {
 	const { layout } = useSidebar();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "mx-auto flex w-full max-w-4xl flex-col gap-10 px-5 py-8 md:px-10 md:py-12",
-		children: [/* @__PURE__ */ jsx(layout === "contained" ? "h2" : "h1", {
-			className: "text-heading-2 text-foreground text-balance",
+		children: [/* @__PURE__ */ jsx(Heading, {
+			level: layout === "contained" ? 2 : 1,
+			size: "heading-2",
 			children: page.title
 		}), page.sections.map((section) => /* @__PURE__ */ jsxs(FieldSet, {
 			className: "gap-3",

package/dist/knob-contracts/label-knobs.d.ts

@@ -0,0 +1,4 @@
+//#region src/knob-contracts/label-knobs.d.ts
+export declare const labelKnobs: readonly ["--cui-label-root-foreground"];
+export type LabelKnobStyle = Partial<Record<(typeof labelKnobs)[number], string>>;
+//#endregion

package/dist/knob-contracts/label-knobs.js

@@ -0,0 +1,4 @@
+//#region src/knob-contracts/label-knobs.ts
+const labelKnobs = ["--cui-label-root-foreground"];
+//#endregion
+export { labelKnobs };

package/dist/knob-contracts/markdown-editor-knobs.d.ts

@@ -0,0 +1,4 @@
+//#region src/knob-contracts/markdown-editor-knobs.d.ts
+export declare const markdownEditorKnobs: readonly ["--cui-markdown-editor-background", "--cui-markdown-editor-foreground", "--cui-markdown-editor-border-color", "--cui-markdown-editor-radius", "--cui-markdown-editor-padding", "--cui-markdown-editor-min-height", "--cui-markdown-editor-max-height", "--cui-markdown-editor-gap", "--cui-markdown-editor-muted-foreground", "--cui-markdown-editor-code-background", "--cui-markdown-editor-border-width"];
+export type MarkdownEditorKnobStyle = Partial<Record<(typeof markdownEditorKnobs)[number], string>>;
+//#endregion

package/dist/knob-contracts/markdown-editor-knobs.js

@@ -0,0 +1,16 @@
+//#region src/knob-contracts/markdown-editor-knobs.ts
+const markdownEditorKnobs = [
+	"--cui-markdown-editor-background",
+	"--cui-markdown-editor-foreground",
+	"--cui-markdown-editor-border-color",
+	"--cui-markdown-editor-radius",
+	"--cui-markdown-editor-padding",
+	"--cui-markdown-editor-min-height",
+	"--cui-markdown-editor-max-height",
+	"--cui-markdown-editor-gap",
+	"--cui-markdown-editor-muted-foreground",
+	"--cui-markdown-editor-code-background",
+	"--cui-markdown-editor-border-width"
+];
+//#endregion
+export { markdownEditorKnobs };

package/dist/knob-contracts/switch-knobs.d.ts

@@ -1,4 +1,4 @@
 //#region src/knob-contracts/switch-knobs.d.ts
-export declare const switchKnobs: readonly ["--cui-switch-thumb-shadow", "--cui-switch-radius", "--cui-switch-shadow", "--cui-switch-background", "--cui-switch-border-color", "--cui-switch-border-width", "--cui-switch-checked-border-color", "--cui-switch-hover-background", "--cui-switch-checked-background", "--cui-switch-checked-hover-background", "--cui-switch-thumb-radius", "--cui-switch-thumb-background", "--cui-switch-inline-size", "--cui-switch-height", "--cui-switch-padding", "--cui-switch-thumb-inline-size", "--cui-switch-thumb-press-scale", "--cui-switch-thumb-backdrop-filter"];
+export declare const switchKnobs: readonly ["--cui-switch-thumb-shadow", "--cui-switch-radius", "--cui-switch-shadow", "--cui-switch-background", "--cui-switch-border-color", "--cui-switch-border-width", "--cui-switch-checked-border-color", "--cui-switch-hover-background", "--cui-switch-checked-background", "--cui-switch-checked-hover-background", "--cui-switch-thumb-radius", "--cui-switch-thumb-background", "--cui-switch-inline-size", "--cui-switch-height", "--cui-switch-padding", "--cui-switch-thumb-inline-size", "--cui-switch-thumb-press-inline-size", "--cui-switch-thumb-press-scale", "--cui-switch-thumb-backdrop-filter"];
 export type SwitchKnobStyle = Partial<Record<(typeof switchKnobs)[number], string>>;
 //#endregion

package/dist/knob-contracts/switch-knobs.js

@@ -16,6 +16,7 @@ const switchKnobs = [
 	"--cui-switch-height",
 	"--cui-switch-padding",
 	"--cui-switch-thumb-inline-size",
+	"--cui-switch-thumb-press-inline-size",
 	"--cui-switch-thumb-press-scale",
 	"--cui-switch-thumb-backdrop-filter"
 ];

package/dist/markdown-editor/context.d.ts

@@ -0,0 +1,22 @@
+import { MarkdownImageUpload } from "./uploads.js";
+import { Editor } from "@tiptap/core";
+//#region src/markdown-editor/context.d.ts
+export type MarkdownEditorContextValue = {
+  editor: Editor | null;
+  disabled: boolean;
+  source: boolean;
+  markdown: string;
+  sourceRequired: boolean;
+  setSource: (source: boolean) => void;
+  setMarkdown: (value: string) => void;
+  setContentAttributes: (attributes: Record<string, string>) => void;
+  canUpload: boolean;
+  uploads: MarkdownImageUpload[];
+  upload: (files: File[], position?: number) => void;
+  retryUpload: (id: string) => void;
+  removeUpload: (id: string) => void;
+  uploadError: string | null;
+};
+export declare const MarkdownEditorContext: import("react").Context<MarkdownEditorContextValue | null>;
+export declare function useMarkdownEditor(): MarkdownEditorContextValue;
+//#endregion

package/dist/markdown-editor/context.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react";
+//#region src/markdown-editor/context.ts
+const MarkdownEditorContext = createContext(null);
+function useMarkdownEditor() {
+	const context = useContext(MarkdownEditorContext);
+	if (!context) throw new Error("Markdown editor parts require a MarkdownEditor parent.");
+	return context;
+}
+//#endregion
+export { MarkdownEditorContext, useMarkdownEditor };

package/dist/markdown-editor/extensions.d.ts

@@ -0,0 +1,10 @@
+import { JSONContent, Node } from "@tiptap/core";
+import { MarkdownManager } from "@tiptap/markdown";
+//#region src/markdown-editor/extensions.d.ts
+export declare function isEditorUrl(value: string, image?: boolean): boolean;
+export declare const ImageUpload: Node<any, any>;
+export declare function markdownExtensions(): (import("@tiptap/core").Extension<import("@tiptap/markdown").MarkdownExtensionOptions, import("@tiptap/markdown").MarkdownExtensionStorage> | import("@tiptap/core").Extension<import("@tiptap/starter-kit").StarterKitOptions, any> | import("@tiptap/core").Extension<import("@tiptap/extension-table").TableKitOptions, any> | Node<any, any> | Node<import("@tiptap/extension-image").ImageOptions, any> | Node<import("@tiptap/extension-paragraph").ParagraphOptions, any> | Node<import("@tiptap/extension-list").TaskItemOptions, any> | Node<import("@tiptap/extension-list").TaskListOptions, any>)[];
+export declare function createMarkdownCodec(): MarkdownManager;
+export declare function requiresMarkdownSource(markdown: string, codec: MarkdownManager): boolean;
+export declare function hasMarkdownContent(document: JSONContent): boolean;
+//#endregion

package/dist/markdown-editor/extensions.js

@@ -0,0 +1,139 @@
+import { Node } from "@tiptap/core";
+import Image from "@tiptap/extension-image";
+import { TaskItem, TaskList } from "@tiptap/extension-list";
+import Paragraph from "@tiptap/extension-paragraph";
+import { TableKit } from "@tiptap/extension-table";
+import { Markdown, MarkdownManager } from "@tiptap/markdown";
+import StarterKit from "@tiptap/starter-kit";
+//#region src/markdown-editor/extensions.ts
+function isEditorUrl(value, image = false) {
+	if (!value || /[\s\\]/.test(value) || Array.from(value).some((character) => character.charCodeAt(0) < 32)) return false;
+	if (value.startsWith("/") && !value.startsWith("//")) return true;
+	if (!image && value.startsWith("#")) return true;
+	try {
+		const url = new URL(value);
+		return [
+			"https:",
+			"http:",
+			...image ? [] : ["mailto:"]
+		].includes(url.protocol);
+	} catch {
+		return false;
+	}
+}
+const SafeImage = Image.extend({
+	renderMarkdown: (node) => {
+		const src = String(node.attrs?.src ?? "").replace(/[()]/g, (character) => `\\${character}`);
+		const alt = String(node.attrs?.alt ?? "").replace(/[\\[\]]/g, (character) => `\\${character}`);
+		const title = String(node.attrs?.title ?? "").replace(/[\\"]/g, (character) => `\\${character}`);
+		return title ? `![${alt}](${src} "${title}")` : `![${alt}](${src})`;
+	},
+	addAttributes() {
+		return {
+			...this.parent?.(),
+			src: {
+				default: null,
+				parseHTML: (element) => {
+					const src = element.getAttribute("src") ?? "";
+					return isEditorUrl(src, true) ? src : null;
+				},
+				renderHTML: (attributes) => ({ src: isEditorUrl(attributes.src ?? "", true) ? attributes.src : void 0 })
+			}
+		};
+	}
+});
+const MarkdownParagraph = Paragraph.extend({ parseMarkdown: (token, helpers) => {
+	const content = helpers.parseInline(token.tokens ?? []);
+	const first = content[0];
+	const empty = content.length === 1 && first?.type === "text" && ["&nbsp;", "\xA0"].includes(first.text ?? "");
+	return helpers.createNode("paragraph", void 0, empty ? [] : content);
+} });
+const ImageUpload = Node.create({
+	name: "imageUpload",
+	group: "block",
+	atom: true,
+	selectable: true,
+	addAttributes: () => ({
+		id: { default: null },
+		name: { default: "Image" }
+	}),
+	renderHTML: ({ node }) => [
+		"div",
+		{
+			"data-image-upload": "",
+			role: "status"
+		},
+		`Image: ${node.attrs.name}`
+	],
+	renderMarkdown: () => ""
+});
+function markdownExtensions() {
+	return [
+		StarterKit.configure({
+			underline: false,
+			paragraph: false,
+			link: {
+				openOnClick: false,
+				isAllowedUri: (url) => isEditorUrl(url)
+			}
+		}),
+		MarkdownParagraph,
+		SafeImage.configure({
+			allowBase64: false,
+			inline: true
+		}),
+		TaskList,
+		TaskItem.configure({
+			nested: true,
+			HTMLAttributes: { "data-type": "taskItem" }
+		}),
+		TableKit.configure({ table: { resizable: false } }),
+		ImageUpload,
+		Markdown
+	];
+}
+function createMarkdownCodec() {
+	return new MarkdownManager({ extensions: markdownExtensions() });
+}
+const supportedTokens = /* @__PURE__ */ new Set([
+	"space",
+	"code",
+	"heading",
+	"hr",
+	"blockquote",
+	"list",
+	"list_item",
+	"paragraph",
+	"text",
+	"escape",
+	"link",
+	"image",
+	"strong",
+	"em",
+	"codespan",
+	"br",
+	"del",
+	"table",
+	"def",
+	"taskList",
+	"taskItem"
+]);
+function unsupportedToken(value) {
+	if (Array.isArray(value)) return value.some(unsupportedToken);
+	if (typeof value !== "object" || value === null) return false;
+	if ("type" in value && typeof value.type === "string") {
+		if (!supportedTokens.has(value.type)) return true;
+		if ((value.type === "image" || value.type === "link") && "href" in value && typeof value.href === "string" && !isEditorUrl(value.href, value.type === "image")) return true;
+	}
+	return Object.values(value).some(unsupportedToken);
+}
+function requiresMarkdownSource(markdown, codec) {
+	return unsupportedToken(codec.instance.lexer(markdown));
+}
+function hasMarkdownContent(document) {
+	if (document.type === "image") return true;
+	if (document.type === "text" && document.text?.trim()) return true;
+	return document.content?.some(hasMarkdownContent) ?? false;
+}
+//#endregion
+export { ImageUpload, createMarkdownCodec, hasMarkdownContent, isEditorUrl, markdownExtensions, requiresMarkdownSource };

package/dist/markdown-editor/toolbar.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+//#region src/markdown-editor/toolbar.d.ts
+export declare function MarkdownEditorToolbar({ children }: {
+  children?: ReactNode;
+}): import("react").JSX.Element;
+export declare function MarkdownEditorLink(): import("react").JSX.Element;
+export declare function MarkdownEditorImage(): import("react").JSX.Element;
+export declare function MarkdownEditorUploads(): import("react").JSX.Element;
+//#endregion